const PortalWindow = ({ children, onClose }) => {
  const externalContainer = React.useRef(null);
  const externalWindow = React.useRef(null);
  const [mounted, setMounted] = React.useState(false);
  React.useEffect(() => {
    externalWindow.current = window.open(
      "",
      "",
      "width=600,height=400,left=200,top=200"
    );
    externalContainer.current = externalWindow.current.document.createElement(
      "div"
    );
    externalWindow.current.document.body.appendChild(externalContainer.current);
    if (onClose) externalWindow.current.onbeforeunload = onClose;
    setMounted(true);
    return () => {
      externalWindow.current.close();
    };
  }, []);
  return (
    mounted &&
    ReactDOM.createPortal(
      children(externalContainer.current.ownerDocument),
      externalContainer.current
    )
  );
};